import React from 'react';
import { Form, Button, Tooltip, Row, Col } from 'antd';
import {
  VerticalAlignBottomOutlined,
  VerticalAlignMiddleOutlined,
  VerticalAlignTopOutlined,
  AlignLeftOutlined,
  AlignCenterOutlined,
  AlignRightOutlined,
  UnderlineOutlined,
  BoldOutlined,
  ItalicOutlined,
  StrikethroughOutlined,
  FontColorsOutlined
} from '@ant-design/icons';
import classNames from 'classnames';

import { LayerInfoFE } from '@/pages/TemplateEditor/interface';

import { SHOPEE_FONT } from '@/pages/TemplateEditor/components/Editor/components/TemplateEffect/constant';

import ColorPicker from '../../ColorPicker';
import { getClassActive, getFontClassActive } from '../utils';

import styles from './index.module.less';

interface Props {
  layer: LayerInfoFE;
  onChange: (data: any) => void;
}

enum FamilyType {
  Italic = 'Italic',
  Bold = 'Bold',
  BoldItalic = 'BoldItalic'
}

const renderIcon = (key, value, data, UseIcon): React.ReactElement => {
  const active = data[key].includes(value);

  return (
    <UseIcon
      className={classNames(
        'text-base',
        active ? styles['text-primary'] : styles['text-gray-secondary']
      )}
    />
  );
};

export default function RichTextAddOn({
  layer,
  onChange
}: Props): React.ReactElement {
  const data = layer.data.text;
  const isShopeeFont = data.fontFamily.includes(SHOPEE_FONT);

  const updateFontStyle = (type: string): void => {
    let isBold = data.fontFamily.includes(FamilyType.Bold);
    let isItalic = data.fontFamily.includes(FamilyType.Italic);
    if (type === FamilyType.Bold) {
      isBold = !isBold;
    }
    if (type === FamilyType.Italic) {
      isItalic = !isItalic;
    }

    const family = data.fontFamily.split(',');
    const defaultFontFamily = family[family.length - 1];
    const updateFontFamily = [];
    updateFontFamily.push(defaultFontFamily);

    if (isBold) {
      updateFontFamily.unshift(defaultFontFamily + '-' + FamilyType.Bold);
    }
    if (isItalic) {
      updateFontFamily.unshift(defaultFontFamily + '-' + FamilyType.Italic);
    }
    if (isBold && isItalic) {
      updateFontFamily.unshift(defaultFontFamily + '-' + FamilyType.BoldItalic);
    }
    onChange({
      data: {
        text: { fontFamily: updateFontFamily.join(',') }
      }
    });
  };

  return (
    <Row gutter={[24, 12]}>
      <Col span={24}>
        <Form.Item className={styles['font-setting']}>
          <Form.Item name={['data', 'text', 'textColor']}>
            <ColorPicker value={data.textColor}>
              <Tooltip
                title="Text color"
                arrowPointAtCenter
                mouseEnterDelay={1}
              >
                <div
                  className={styles['font-color-icon']}
                  style={{ color: data.textColor }}
                >
                  <Button
                    className={classNames(
                      data.textColor ? styles.active : '',
                      styles['text-base']
                    )}
                  >
                    <FontColorsOutlined
                      className={
                        data.textColor
                          ? styles['text-primary']
                          : styles['text-gray-secondary']
                      }
                    />
                  </Button>
                </div>
              </Tooltip>
            </ColorPicker>
          </Form.Item>
          <Form.Item name="fontWeight">
            <Button
              disabled={isShopeeFont}
              className={getFontClassActive('fontFamily', 'Bold', data)}
              onClick={(): void => updateFontStyle(FamilyType.Bold)}
            >
              <Tooltip title="Bold" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon('fontFamily', 'Bold', data, BoldOutlined)}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item name="fontStyle">
            <Button
              disabled={isShopeeFont}
              className={getFontClassActive('fontFamily', 'Italic', data)}
              onClick={(): void => updateFontStyle(FamilyType.Italic)}
            >
              <Tooltip title="Italic" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon('fontFamily', 'Italic', data, ItalicOutlined)}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item className={styles['add-border']}>
            <Button
              value="line-through"
              onClick={(): void =>
                onChange({
                  data: {
                    text: {
                      textDecorationLine:
                        data.textDecorationLine === 'line-through'
                          ? ''
                          : 'line-through'
                    }
                  }
                })
              }
              className={getClassActive(
                'textDecorationLine',
                'line-through',
                data
              )}
            >
              <Tooltip
                title="Strikethrough"
                arrowPointAtCenter
                mouseEnterDelay={1}
              >
                {renderIcon(
                  'textDecorationLine',
                  'line-through',
                  data,
                  StrikethroughOutlined
                )}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              value="underline"
              onClick={(): void =>
                onChange({
                  data: {
                    text: {
                      textDecorationLine:
                        data.textDecorationLine === 'underline'
                          ? ''
                          : 'underline'
                    }
                  }
                })
              }
              className={getClassActive(
                'textDecorationLine',
                'underline',
                data
              )}
            >
              <Tooltip title="Underline" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon(
                  'textDecorationLine',
                  'underline',
                  data,
                  UnderlineOutlined
                )}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item className={styles['add-border']}>
            <Button
              value="left"
              onClick={(): void =>
                onChange({
                  data: {
                    text: { horizontalAlign: 'left' }
                  }
                })
              }
              className={getClassActive('horizontalAlign', 'left', data)}
            >
              <Tooltip title="Left" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon('horizontalAlign', 'left', data, AlignLeftOutlined)}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              value="center"
              onClick={(): void =>
                onChange({
                  data: {
                    text: { horizontalAlign: 'center' }
                  }
                })
              }
              className={getClassActive('horizontalAlign', 'center', data)}
            >
              <Tooltip title="Center" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon(
                  'horizontalAlign',
                  'center',
                  data,
                  AlignCenterOutlined
                )}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              value="right"
              onClick={(): void =>
                onChange({ data: { text: { horizontalAlign: 'right' } } })
              }
              className={getClassActive('horizontalAlign', 'right', data)}
            >
              <Tooltip title="Right" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon(
                  'horizontalAlign',
                  'right',
                  data,
                  AlignRightOutlined
                )}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item className={styles['add-border']}>
            <Button
              value="up"
              onClick={(): void =>
                onChange({ data: { text: { verticalAlign: 'up' } } })
              }
              className={getClassActive('verticalAlign', 'up', data)}
            >
              <Tooltip title="Top" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon(
                  'verticalAlign',
                  'up',
                  data,
                  VerticalAlignTopOutlined
                )}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              value="center"
              onClick={(): void =>
                onChange({ data: { text: { verticalAlign: 'center' } } })
              }
              className={getClassActive('verticalAlign', 'center', data)}
            >
              <Tooltip title="Middle" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon(
                  'verticalAlign',
                  'center',
                  data,
                  VerticalAlignMiddleOutlined
                )}
              </Tooltip>
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              value="down"
              onClick={(): void =>
                onChange({ data: { text: { verticalAlign: 'down' } } })
              }
              className={getClassActive('verticalAlign', 'down', data)}
            >
              <Tooltip title="Bottom" arrowPointAtCenter mouseEnterDelay={1}>
                {renderIcon(
                  'verticalAlign',
                  'down',
                  data,
                  VerticalAlignBottomOutlined
                )}
              </Tooltip>
            </Button>
          </Form.Item>
        </Form.Item>
      </Col>
    </Row>
  );
}
